<!--
 * @Author: YuHao
 * @Date: 2022-04-14 10:33:14
 * @LastEditTime: 2022-04-14 13:22:42
 * @LastEditors: YuHao
 * @Description: 
 * @FilePath: \vben-admin\src\components\CountDown\src\CountButton.vue
 * Copyright (c) 2022 by 弗斯特机电设备有限公司, All Rights Reserved. 
-->
<template>
  <Button v-bind="$attrs" :disabled="isStart" @click="handleStart" :loading="loading">
    {{ getButtonText }}
  </Button>
</template>
<script lang="ts">
import { defineComponent, ref, watchEffect, computed, unref } from 'vue';
import { Button } from 'ant-design-vue';
import { useCountdown } from './useCountdown';
import { isFunction } from '/@/utils/is';

const props = {
  value: { type: [Object, Number, String, Array] },
  count: { type: Number, default: 60 },
  beforeStartFunc: {
    type: Function as PropType<() => Promise<boolean>>,
    default: null,
  },
};

export default defineComponent({
  name: 'CountButton',
  components: { Button },
  props,
  setup(props) {
    const loading = ref(false);

    const { currentCount, isStart, start, reset } = useCountdown(props.count);

    const getButtonText = computed(() => {
      return !unref(isStart)
        ? '获取验证码'
        : [unref(currentCount)] + '秒后重新获取';
    });

    watchEffect(() => {
      props.value === undefined && reset();
    });

    /**
     * @description: Judge whether there is an external function before execution, and decide whether to start after execution
     */
    async function handleStart() {
      const { beforeStartFunc } = props;
      if (beforeStartFunc && isFunction(beforeStartFunc)) {
        loading.value = true;
        try {
          const canStart = await beforeStartFunc();
          canStart && start();
        } finally {
          loading.value = false;
        }
      } else {
        start();
      }
    }
    return { handleStart, currentCount, loading, getButtonText, isStart };
  },
});
</script>
